<template>
    <div>
        <ext-treetable v-loading="loading" ref="treeTable"
                       row-key="title"
                       border
                       :data="tableData"
                       size="mini" stripe style="margin-top: 5px;">
            <el-table-column label="编号" prop="id" align="center" width="60"/>
            <el-table-column label="资源名称" prop="title" align="center">
                <template slot-scope="scope">
                    <i :class="'fa fa-' + scope.row.icon"></i> {{scope.row.title}}
                </template>
            </el-table-column>
            <el-table-column label="权限编码" prop="permission" align="center"/>
            <el-table-column label="前端路径" prop="path" align="center"/>
            <el-table-column label="组件路径" prop="component" align="center"/>
            <el-table-column label="请求地址" prop="url" align="center"/>
            <el-table-column label="请求方式" prop="method" align="center"/>
            <el-table-column label="资源类型" prop="resource_type" align="center"
                             :filters="[{ text: '目录', value: 'DIR' },
                             { text: '模块', value: 'MODULE' },
                             { text: '按钮', value: 'BUTTON' },
                             { text: '接口', value: 'API' }]"
                             :filter-method="filterType">
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.type == 'DIR'" size="mini">目录</el-tag>
                    <el-tag v-if="scope.row.type == 'MODULE'" size="mini" type="success">模块</el-tag>
                    <el-tag v-if="scope.row.type == 'BUTTON'" size="mini" type="info">按钮</el-tag>
                    <el-tag v-if="scope.row.type == 'API'" size="mini" type="warning">接口</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="排序值" prop="sorted" width="120" align="center"/>

            <!--<el-table-column label="状态" prop="status" align="center" width="80">
                <template slot-scope="scope">
                    <boolean-control
                            :value="scope.row.status"
                            :id="scope.row.id"
                            @tableLoad="tableLoad"
                            @change="(val) => {scope.row.status = val}"
                    >
                        <d2-icon
                                name="check-circle"
                                style="font-size: 20px; line-height: 32px; color: #67C23A;"
                                slot="active"/>
                        <d2-icon
                                name="times-circle"
                                style="font-size: 20px; line-height: 32px; color: #F56C6C;"
                                slot="inactive"/>
                    </boolean-control>
                </template>

            </el-table-column>-->

            <el-table-column fixed="right" label="操作" align="center" width="130">
                <template slot-scope="scope">
                    <el-button type="primary" title="添加子级" size="mini" icon="el-icon-plus" circle
                               @click="handleForm({'status':'Y','ordinal':1, 'resource_type':'1','open_type':'0','parent_resource_id':scope.row.id,icon:'delicious'},'insert',scope.row)"></el-button>
                    <el-button type="primary" title="编辑" size="mini" icon="el-icon-edit" circle
                               @click="handleForm(scope.row,'update',scope.row)"></el-button>
                    <el-button type="danger" title="删除" :loading="scope.row.delLoading" size="mini"
                               icon="el-icon-delete" circle @click="handleDelete(scope.row)"></el-button>
                </template>
            </el-table-column>

        </ext-treetable>

    </div>
</template>

<script>

    import {tree} from "@/api/upms/menu";

    export default {
        data() {
            return {
                loading: false,
                tableData: [
                    {
                        "resource_url": "/rbac",
                        "open_type": "0",
                        "create_time": "2018-11-07 17:16:19",
                        "resource_code": "system",
                        "resource_type": "0",
                        "icon": "gear",
                        "permission": null,
                        "remark": null,
                        "leaf": false,
                        "update_time": "2018-11-08 11:45:07",
                        "parent_resource_id": "ROOT",
                        "children": [
                            {
                                "resource_url": "/rbac/org",
                                "open_type": "0",
                                "create_time": "2018-11-07 17:19:45",
                                "resource_code": "org",
                                "resource_type": "1",
                                "icon": "cubes",
                                "permission": null,
                                "remark": null,
                                "update_time": "2018-11-08 18:08:15",
                                "parent_resource_id": "266978270006743040",
                                "id": "266979132951236608",
                                "resource_name": "机构管理",
                                "status": "Y",
                                "ordinal": 1
                            },
                            {
                                "resource_url": "/rbac/user",
                                "open_type": "0",
                                "create_time": "2018-11-07 17:20:03",
                                "resource_code": "user",
                                "resource_type": "1",
                                "icon": "user",
                                "permission": null,
                                "remark": null,
                                "update_time": "2018-11-08 15:19:31",
                                "parent_resource_id": "266978270006743040",
                                "id": "266979208247382016",
                                "resource_name": "用户管理",
                                "status": "Y",
                                "ordinal": 2
                            },
                            {
                                "resource_url": "/rbac/role",
                                "open_type": "0",
                                "create_time": "2018-11-07 17:50:07",
                                "resource_code": "role",
                                "resource_type": "1",
                                "icon": "user-circle",
                                "permission": null,
                                "remark": null,
                                "update_time": "2018-11-08 15:19:52",
                                "parent_resource_id": "266978270006743040",
                                "id": "266986776843784192",
                                "resource_name": "角色管理",
                                "status": "Y",
                                "ordinal": 4
                            },
                            {
                                "resource_url": "/rbac/resource",
                                "open_type": "0",
                                "create_time": "2018-11-07 17:49:56",
                                "resource_code": "resource",
                                "resource_type": "1",
                                "icon": "delicious",
                                "permission": null,
                                "remark": null,
                                "update_time": "2018-11-07 17:50:16",
                                "parent_resource_id": "266978270006743040",
                                "id": "266986727237750784",
                                "resource_name": "资源管理",
                                "status": "Y",
                                "ordinal": 5
                            }
                        ],
                        "id": "266978270006743040",
                        "resource_name": "系统管理",
                        "status": "Y",
                        "ordinal": 1
                    }
                ]
            }
        },
        created() {
            this.getList();
        },
        methods: {
            getList() {
                this.loading = true;
                tree().then(res => {
                    this.tableData = res;
                    this.loading = false;
                })
            }
        }
    }
</script>
